<template>
  <div>
      <el-tabs type="border-card" @tab-click="tabClick">
          <el-tab-pane label="在售菜品总览" class="tab-pan">
              <el-row>
                  <el-col v-for="item in onSaleDishList" :key="item.id" :span="3" class="col">
                      <el-card :body-style="{padding:'0px'}">
                          <img :src="item.pic" class="image">
                          <div style="padding:14px">
                              <span class="name">{{item.name}}</span>
                              <div class="price">{{item.price}}元／例</div>
                              <div class="time">{{formater(item.created)}}</div>
                              <el-rate v-model="item.star" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                          </div>
                      </el-card>
                  </el-col>
              </el-row>
              <el-pagination background layout="prev,pager,next" :total="pagesum" class="pager" @current-change="pageChange"></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="菜品编辑" v-loading.body.lock="loading">
              <div class="header">
                  <el-button type="primary" @click="addClick()">新建菜品</el-button>
                  <el-dialog title="新建菜品" :visible.sync="dialogVisible">
                  <el-form :model="form">
                      <el-form-item label="名称">
                          <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="简介">
                          <el-input v-model="form.description" type="textarea"></el-input>
                      </el-form-item>
                      <el-form-item label="菜品图片">
                          <el-upload action="" :file-list="fileList" :on-change="uploadPic" :multiple="false" :auto-upload="false" :on-remove="removePic">
                               <el-button size="small" type="primary">点击上传</el-button>
                               <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过4M</div>
                          </el-upload>
                      </el-form-item>
                      <el-form-item>
                          <el-radio-group v-model="dishType">
                              <el-radio :label="1">热菜</el-radio>
                              <el-radio :label="2">凉菜</el-radio>
                              <el-radio :label="3">汤</el-radio>
                              <el-radio :label="4">主食</el-radio>
                          </el-radio-group>
                      </el-form-item>
                      <el-form-item label="单价（元／例）">
                          <el-input v-model="form.price"></el-input>
                      </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="commitForm()">添加</el-button>
                  </div>
                </el-dialog>
              </div>
              <el-table :data="configDishList" style="width:100%" max-height="650">
                  <el-table-column fixed prop="code" label="编码" width="120"></el-table-column>
                  <el-table-column fixed prop="name" label="名称" width="120"></el-table-column>
                  <el-table-column fixed prop="description" label="简介" width="300"></el-table-column>
                  <el-table-column fixed label="创建时间" width="200">
                      <template slot-scope="scope">{{formater(scope.row.created)}}</template>
                  </el-table-column>
                  <el-table-column fixed prop="star" label="评分" width="120"></el-table-column>
                  <el-table-column fixed label="上架状态" width="180">
                      <template slot-scope="scope">
                          <el-radio-group v-model="scope.row.selling" size="mini" @change="statusChanged(scope.row)">
                              <el-radio-button :label="1">上架</el-radio-button>
                              <el-radio-button :label="0">下架</el-radio-button>
                          </el-radio-group>
                      </template>
                  </el-table-column>
                  <el-table-column fixed label="单价（元／例）" width="150">
                      <template slot-scope="scope">
                          <el-button type="primary" @click="changePrice(scope.row)">¥{{scope.row.price}}</el-button>
                      </template>
                  </el-table-column>
                  <el-table-column fixed label="操作" width="100">
                      <template slot-scope="scope">
                          <el-button type="danger" icon="el-icon-delete" @click="deleteDish(scope.row)" round size="mini"></el-button>
                      </template>
                  </el-table-column>
              </el-table>
                <el-dialog title="修改单价" :visible.sync="changePriceDialog">
                    <el-input v-model="changePriceForm.price"></el-input>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="changePriceDialog = false">取消</el-button>
                        <el-button type="primary" @click="commitChangePrice()">修改</el-button>
                    </div>
               </el-dialog>
          </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import { uploadFile } from "@/utils/upload"
import { getToken } from "@/api/token"
import { createDish, getConfigList, changeDishStatus, deleteDish, onSaleList, changePriceAccess } from "@/api/dish"
import { formatDate } from "@/utils/dateformat"


export default {
    data(){
        return {
            changePriceDialog:false,
            dialogVisible:false,
            form:{
                name:'',
                description:'',
                price:''
            },
            fileList:[],
            picUrl:'',
            configDishList:[],
            dishType: 1,
            loading:false,
            onSaleDishList:[],
            page:1,
            pagesum:10,
            changePriceForm:{
                price:'',
                did:''
            }
        }
    },
    created(){
        this.getOnSaleDishList()
    },
    methods:{
        addClick(){
            this.dialogVisible = true
        },
        uploadPic(file,fileList){
            console.log(fileList)
            getToken().then(response => {
                if(response.code === 200){
                    var that = this
                    uploadFile(response.data,file.raw).then(res => {
                        that.picUrl = 'http://oqedyhjhj.bkt.clouddn.com/' + res
                        console.log(that.picUrl)
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        },
        removePic(){
            this.picUrl = ''
            this.fileList = []
        },
        commitForm(){
            if (this.form.name === '' || this.form.description === '' || this.picUrl === '' || this.form.price === ''){
                this.$message.error('请补全信息')
            }else{
                createDish({
                    name:this.form.name,
                    description:this.form.description,
                    picUrl:this.picUrl,
                    type:this.dishType,
                    price:this.form.price
                }).then(res => {
                    if(res.code == 200){
                        this.dialogVisible = false
                        this.getConfigDishList()
                        this.form.name = ''
                        this.form.description = ''
                        this.picUrl = ''
                        this.fileList = [],
                        this.form.price = ''
                    }
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }
        },
        tabClick(tab){
            if(tab.index == 1){
                this.getConfigDishList()
            }else{
                this.getOnSaleDishList()
            }
        },
        getConfigDishList(){
            getConfigList().then(res => {
                if(res.code == 200){
                    this.configDishList = res.data
                }else{
                    this.$message.error(res.data)
                    this.configDishList = []
                }   
            }).catch(err => {
                this.$message.error(err.message)
                this.configDishList = []
            })
        },
        formater(date){
           return formatDate(date)
        },
        statusChanged(data){
            this.loading = true
            changeDishStatus({
                did:data.id,
                status:data.selling
            }).then(res => {
                if(res.code == 200){

                }else{
                    this.$message.error(res.data)
                }
                this.loading = false
            }).catch(err => {
                this.$message.error(err.message)
                this.loading = false
            })
        },
        deleteDish(data){
            this.$confirm('此操作将永久删除这条数据，是否继续？','提示',{
                confirmButtonText:'删除',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                deleteDish({did:data.id}).then(res => {
                    if(res.code === 200){
                        this.getConfigDishList()
                    }else{
                        this.$message.error(res.data)
                    }
                }).catch(err => {
                    this.$message.error(err.message)
                })
            })
        },
        getOnSaleDishList(){
            onSaleList({
                page:this.page,
                size:12
            }).then(res => {
                this.onSaleDishList = res.data.list
                var pages = Math.ceil(res.data.sum/12)
                if(pages < 1){
                    pages = 1
                }
                this.pagesum = pages*10
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        pageChange(currentPage){
            this.page = currentPage
            this.getOnSaleDishList()
        },
        changePrice(data){
            this.changePriceDialog = true
            this.changePriceForm = {
                price:data.price,
                did:data.id
            }
        },
        commitChangePrice(){
            if(this.changePriceForm.price === ''){
                this.$message.error('单价不能为空')
                return;
            }
            changePriceAccess({
                did:this.changePriceForm.did,
                price:this.changePriceForm.price
            }).then(res => {
                this.changePriceDialog = false;
                this.getConfigDishList()
            }).catch(err => {
                this.$message.error(err.message)
            })
        }
        
    }
}
</script>
<style>
.header{
    height: 60px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #dedede;
}
.image{
    width: 100%;
    height: 180px;
    display: block;
}
.col{
    margin: 20px 30px 20px 30px;
}
.name{
    font-size: 20px;
    font-weight: bold;
}
.time{
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #888;
}
.tab-pan{
    height: 745px;
}
.pager{
    margin-top: 30px;
    text-align: right;;
}
.price{
    margin-top: 10px;
    font-size: 20px;
    color: darkorange;
    font-weight: bold;
}
</style>
